<template>
  <div class="full step3-wrapper">
    <div class="weui-msg" v-show="!paySuc">
      <div class="weui-msg__text-area">
        <h2 class="text-center weui-msg__title">申请二级代理</h2>
        <!-- <p class="weui-msg__desc" v-text="itemInfoTip"></p> -->
        <p v-text="itemInfoTip"></p>
        <p>2: 二级代理享受玩家销售额 50%的提成。</p>
      </div>
      <div class="weui-msg__opr-area">
        <p class="weui-btn-area">
          <a @click="confirm" class="weui-btn weui-btn_primary">确认购买</a>
          <a @click="back" class="weui-btn weui-btn_default">返回上一步</a>
        </p>
      </div>
      <div class="weui-msg__extra-area">
        <div class="weui-footer">
          <p class="weui-footer__text">乐翻天@2019</p>
        </div>
      </div>
    </div>
    <div class="weui-msg" v-show="paySuc">
      <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
      <div class="weui-msg__text-area">
          <h2 class="weui-msg__title">代理申请成功!</h2>
          <p class="weui-msg__desc"></p>
      </div>
      <div class="weui-msg__opr-area">
        <p class="weui-btn-area">
          <a @click="gotoProxy" class="weui-btn weui-btn_primary">进入代理中心</a>
        </p>
      </div>
      <div class="weui-msg__extra-area">
        <div class="weui-footer">
          <p class="weui-footer__text">乐翻天@2019</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapMutations, mapState} from 'Vuex'
export default {
  data() {
    return {
      paySuc: false
    }
  },
  methods: {
    confirm() {
      const shoppingItem = this.submitRes.data[0]
      if (!shoppingItem) {
        return
      }
      const params = [{
        gid: shoppingItem.gid,
        quantity: 1
      }]
      this.api.payApi.generateOrder(params, this.upperAgentRes.data.lftid).then(res => res.json()).then(data => {
        console.log(data);
        if (data.result) {
          $.alert(data.message)
          return
        }
        this.onBridgeReady(data.data)
      })
      window.btn_sound.play();
    },
    onBridgeReady(data) {
      // const { timestamp, nonceStr, package, signType, paySign, appId } = data
      const onComplete = res => {
        if (res.err_msg === 'get_brand_wcpay_request:ok') {
          // this.paySuc = true
          // alert(JSON.stringify(data))
          let _this = this
          setTimeout(function() {
            _this.api.payApi.audit(data.orderNo).then(res => res.json()).then(data => {
            if (data.result) {
               _this.api.payApi.audit(data.orderNo).then(res => res.json()).then(data => {
            if (data.result) {
              $.alert(data.message)
              return
            }
            _this.paySuc = true
          })
              return
            }
            _this.paySuc = true
          })
          }, 1500)
        }
      }
      WeixinJSBridge.invoke('getBrandWCPayRequest', data, onComplete)
    },
    back () {
      window.btn_sound.play();
      this.$router.push({name: 'Step2Info'})
    },
    gotoProxy() {
      window.location.href = `home_page.html?areaCode=${Cookies.get('areaCode')}&token=${Cookies.get('token')}`
    }
  },
  computed: {
    ...mapState(['submitRes', 'proxyLevel', 'api', 'upperAgentRes']),
    itemInfoTip() {
      const shoppingItem = this.submitRes.data[0]
      if (!shoppingItem) {
        return ''
      }
      const proxyLevel = this.proxyLevel === 2 ? '一级代理' : '二级代理'
      return `1: 购买${shoppingItem.price}钻石,即可获赠${proxyLevel}权限。`
    }
  },
  components: {
  }
}

</script>

<style lang="less">
.step3-wrapper {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
}
</style>